<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"/>
    <title></title>
    <style>
        html, body {
            margin: 0;
            padding: 0;
            overflow: hidden;
        }

        .box {
            width: 100%;
            height: 3000px;
            background: greenyellow;
            margin-top: 200px;
        }

    </style>
</head>

<body>
<div class="box"></div>
</body>
<script>

    var box = document.querySelector(".box");


    function moveBox(box){
        //定义鼠标在两个事件之前的Y轴位置
        var startY = 0;
        var moveY = 0;
        var distance = 0;
        var moveWay = 0;

//手指能滑动的最大距离
        var maxPosition = box.offsetHeight - window.screen.availHeight;

//清除过渡
        function clearTransition() {
            box.style.webkitTransition = "none";
            box.style.transition = "none";
        }

//添加过渡
        function addTransition() {
            box.style.webkitTransition = "all 0.3s";
            box.style.transition = "all 0.3s";
        }

//添加2D运动
        function addTransform() {
            box.style.webkitTransform = "translateY(" + (moveWay + distance) + "px)";
            box.style.transform = "translateY(" + (moveWay + distance) + "px)";
        }

//小手触摸的时候，记录下当时的鼠标的位置
        box.addEventListener("touchstart", function (e) {
            startY = e.touches[0].clientY;
        });

//小手移动的时候,记录下distance
        box.addEventListener("touchmove", function (e) {
            moveY = e.touches[0].clientY;
            distance = moveY - startY;
            clearTransition();
            addTransform();
        });

//小手松开，ul停在停止的位置
        box.addEventListener("touchend", function () {
            moveWay += distance;
//            if (moveWay > 0) {
//                moveWay = 0;
//                distance = 0;
//                addTransition();
//                addTransform();
//            }
//            else if (-moveWay > maxPosition) {
//                moveWay = -maxPosition;
//                distance = 0;
//                addTransition();
//                addTransform();
//            }
            //清除数据
            startY = 0;
            moveY = 0;
        });
    }
    moveBox(box)

</script>
</html>